<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>纯CSS3五彩Loading加载动画DEMO演示</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>


<div id="ajaxloader1"></div>

<div id="ajaxloader2">
  <div class="outer"></div>
  <div class="inner"></div>
</div>

<div id="ajaxloader3">
  <div class="outer"></div>
  <div class="inner"></div>
</div>

<div id="ajaxbar1">
  <div id="block1" class="barlittle"></div>
  <div id="block2" class="barlittle"></div>
  <div id="block3" class="barlittle"></div>
  <div id="block4" class="barlittle"></div>
  <div id="block5" class="barlittle"></div>
</div>

<div id="ajaxwave1">
  <div id="pointcircle1" class="pointcircle"></div>
  <div id="pointcircle2" class="pointcircle"></div>
  <div id="pointcircle3" class="pointcircle"></div>
  <div id="pointcircle4" class="pointcircle"></div>
  <div id="pointcircle5" class="pointcircle"></div>
</div>

<div id="facebook">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

<div id="loadpulse">
    <div class="segment">
      <div id="layer1" class="ball"></div>
      <div id="layer7" class="pulse"></div>
    </div>
    <div class="segment">
      <div id="layer2" class="ball"></div>
      <div id="layer8" class="pulse"></div>
    </div>
    <div class="segment">
      <div id="layer3" class="ball"></div>
      <div id="layer9" class="pulse"></div>
    </div>
    <div class="segment">
      <div id="layer4" class="ball"></div>
      <div id="layer10" class="pulse"></div>
    </div>
    <div class="segment">
      <div id="layer5" class="ball"></div>
      <div id="layer11" class="pulse"></div>
    </div>
</div>

<div id="shadowloader">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<h1 class="loadingtext">
  <span>L</span>
  <span>o</span>
  <span>a</span>
  <span>d</span>
  <span>i</span>
  <span>n</span>
  <span>g</span>
</h1>


</body>

</html>
